﻿<!DOCTYPE html>
<html>
<head>
    <title>Phaser Example</title>
    <script src="../../js/phaser-2.4.4.js"></script>
    <!-- don't forget to add compatibility js -->
    <script src="../../js/phaser-compat-2.4.js"></script>

    <script src="../../dist/EZGUI.js"></script>

</head>
<body>
    <script>
        var guiObj = {
            id: 'main',
            component: 'Window',
            header: { id: 'ttl', skin: 'blueheader', position: { x: 0, y: 0 }, height: 40, text: 'Title' },
            draggable: true,
            padding: 4,
            position: { x: 0, y: 0 },
            width: 600,
            height: 550,


            layout: [1, 3],
            children: [
                {
                    component: 'Layout',
                    position: { x: 0, y: 0 },
                    width: 500,
                    height: 140,
                    layout: [2, 1],

                    children: [
                          {
                              id: 'btn1',
                              text: 'btn',
                              font: {
                                  size : '42px',
                                  family: 'Arial'
                              },
                              component: 'Button',
                              skin: 'bluebutton',
                              position: 'center',
                              width: 190,
                              height: 80
                          },
                          {
                              component: 'Layout',
                              position: { x: 0, y: 0 },
                              width: 250,
                              height: 140,
                              layout: [1, 4],
                              children: [
                                  { id: 'radio1', text: 'choice 1', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio2', text: 'choice 2', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio3', text: 'choice 3', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 },
                                  { id: 'radio4', text: 'choice 4', component: 'Radio', group: 1, position: 'center', width: 30, height: 30 }
                              ]
                          }
                    ]
                },

            {
                id: 'hlist1',
                component: 'List',

                padding: 3,
                position: 'center',
                width: 400,
                height: 150,
                layout: [4, null],
                children: [
                    { id: 'sc1', component: 'Button', position: 'center', width: 90, height: 120 },
                    null,
                    { id: 'sc2', component: 'Button', position: 'center', width: 90, height: 120 },
                    { id: 'sc3', component: 'Button', position: 'center', width: 90, height: 120 },
                    { id: 'sc4', component: 'Button', position: 'center', width: 90, height: 120 },
                    { id: 'sc5', component: 'Button', position: 'center', width: 90, height: 120 }
                ]
            },
              {
                  id: 'btn2',
                  component: 'Checkbox',

                  position: 'center',
                  text: 'Checkbox',
                  width: 30,
                  height: 30

              }
            ]
        }

    </script>
    <script>

        var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });

        function preload() {

            game.load.image('logo', 'phaser.png');

        }

        function create() {

            var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo');
            logo.anchor.setTo(0.5, 0.5);

        }





        //Set EZGUI renderer
        EZGUI.renderer = game.renderer;

        //load EZGUI themes
        //here you can pass multiple themes
        EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () {


            //create the gui
            //the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field
            var guiContainer = EZGUI.create(guiObj, 'kenney');

            EZGUI.components.btn1.on('click', function (event) {
                    console.log('clicked', event);
                });

        })



    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
